7. קישורים (Links) ב - CSS
בוודאי קבעתם בעבר צבעים של ברירת מחדל עבור קישורים בדפי האתר שלכם. צבעים שונים תלויים באם ביקרו בקישורי היעד או לא ואם האתר פעיל או לא.
בשיעור זה נלמד לעשות משהו מאוד דומה בעזרת שימוש ב-CSSים.
מצבי הקישור השונים
ב-CSSים יכולים להיות לקישורים 4 מצבים שונים:
קישור (link) - זהו המצב הנורמלי.
ביקור (visited) - כשהדפדפן ביקר ביעד זה לא מזמן.
פעיל (active) - בזמן שמקישים על הקישור.
ריחוף (hover) - בזמן שהסמן נמצא מעל הקישור.
בעזרת ה-CSSים אנו יכולים ליצור כללים המיושמים על הקישורים בכל אחד מהמצבים האלה.
מאוד דומים לכללים שכבר ראינו. ההבדל האמיתי, כאן, הוא סוג מיוחד של בורר הבוחר קישורים במצבים השונים.
הצורה של הבורר הזה היא A:state, זהו
A:link
A:visited
A:active
A:hover
תרגיל מס' 1
צרו קבוצת כללים, המיישמים צבעים שונים לקישורים שלכם, בכל אחד מן המצבים השונים.
רמז: המאפיין המציין את צבע הטקסט הוא מאפיין הצבע. ניתן להגדיר צבעים בשימוש של אחד מתוך 16 מילות מפתח, או ע"י ערכים הקסדקסימלים. בדיוק כמו עם HTML. לגבי מידע נוסף בקשר לערכים של הצבעים, עברו על (resources) המקורות בסוף שיעור ההדרכה הזה.
הצורה של הערכים ההקסדקסימלים היא #RRGGBB
כשהערך לצבע אדום הוא RR בין 00 ו- FF הקסדקסימלי
הערך לצבע הירוק הוא GG בין 00 ו-FF הקסדקסימלי
הערך לצבע הכחול הוא BB בין 00 ו-FF הקסדקסימלי.
דוגמא לתשובה בסוף שיעור זה.
האם זה עובד? הגיע הזמן לשמור את ה-CSS, ולעמוד מול המוסיקה, ע"י פתיחת העמוד הזה בדפדפן.
מעבר לצבע
אם ניזכר בכלל הראשון שלנו, כשקבענו את רקע העמודים, תיזכרו שבעזרת CSSים לא רק לעמוד עצמו יכול להיות צבע רקע או דמות, אלא כל אלמנט יכול לקבל רקע. סגנון קישור שאני מוצא אותו יפה ויעיל הוא אחד שראיתי לראשונה כחלק מפרוייקט הגרעין של CSSים של Tod Fahrner.
זה ממקם רקע צבעוני מאחורי הקישור, המשתנה כאשר ביקרו בקישור זה, או כאשר העכבר נמצא מעליו.
תרגיל מס' 2
אם נתבסס על מה שלמדנו כעת, ובשיעור על רקעים, אנו רוצים לפתח קבוצת כללים, המיישמת צבעי רקע שונים לקישורים, בכל אחד מארבעת המצבים שלהם.
דוגמא לתשובה בסוף שיעור זה.
שוב, שימרו את ה-CSS ופיתחו את הדף בדפדפן. מה, לא עובד? גיליתי שלפעמים יש צורך לסגור את החלון, לפתוח חלון חדש ולפתוח שוב את הדף. חשוב גם להבטיח את שמירתו של ה-CSS.
שלב הבא
בשיעור זה למדנו אודות עיצוב קישורים בעזרת CSSים. בנינו את הידע שלנו על בוררים, ולמדנו על בורר חדש לבחירת קישורים במצבים שונים. ראינו גם, תוך כדי עבודה, כיצד ניתן ליישם רקעים עבור יותר מגוף העמוד בלבד.
עד כה לא ראינו הרבה אודות מאפייני מבנה העמוד (page layout features) של ה-CSSים. על זה נתמקד עכשיו
תשובה לתרגיל מס' 1
A:link {color: #ffcccc}
A:visited {color: #ff99cc}
A:active {color: #ff66cc}
A:hover {color: #ff33cc}
תשובה לתרגיל מס' 1
A:link {background-color: #ccffcc}
A:visited {background-color: #99ffcc}
A:active {background-color: #99cccc}
A:hover {background-color: #66cccc}
|
